<!DOCTYPE html>
<html>

<head>
	<script src="./qwebchannel.js">
		//这里是加载Qt提供的QWebChannel的js文件,是相对地址,根据当前HTML文件与你复制的qwebchannel.js文件的相对地址得出src
	</script>
	<script type="text/javascript">
		//捕获全局键盘事件,若将window.onkeydown改成document.onkeydown则只在当前页面捕获
		window.onkeydown = function (event) {
			var keyCode = event.keyCode || event.which || event.charCode;
			var ctrlKey = event.ctrlKey || event.metaKey;
			//捕获ctrl+F12
			if (ctrlKey && keyCode == 123) {
				event.preventDefault();//阻止默认事件
				WebClientBridge_obj.openDevelopTool();//调用辅助类打开开发者工具
			}
			// event.preventDefault(); // 注意：阻止默认事件不能放在外面，会阻止浏览器或者input/textarea的默认事件，应该放在相应的按键组合中去阻止
			return false;
		}

		function showAlert(data) {
			//直接读取c++辅助类中的某个已经注册为公开变量的变量
			//jsInvokeC()中修改了someattribute_test的值,这个值的修改会同步到c++客户端,所以这里读取到的值是已经修改了的值
			alert("someattribute_1:" + WebClientBridge_obj.someattribute_test);
			console.log(
				"===============================>>>>>>>>>>>>>>",
				WebClientBridge_obj.someattribute_test
			);
			alert("someattribute_2:" + data + WebClientBridge_obj.someattribute_2);
		}
		var data = 0;

		function jsInvokeC() {
			//直接修改c++辅助类中的某个已经注册为公开变量的变量
			WebClientBridge_obj.someattribute_test = "someattribute_1的值_" + data + "_test"
			//读取修改后的值并调用辅助类的public slots:修饰的槽函数,将数据传给c++客户端
			WebClientBridge_obj.jscall(data++ + WebClientBridge_obj.someattribute_test);
		}

		// QT交互,创建一个QWebChannel对象,并将c++中注册带辅助类加载到前端
		//需要将qwebchannel.js这个js文件引入到创建QWebChannel对象的文件中,qwebchannel.js定义了QWebChannel对象
		//qwebchannel.js是Qt的WebEngine模块提供的,在qt安装目录下搜索就能找到这个文件(前提是安装qt的时候安装了WebEngine模块)
		new QWebChannel(qt.webChannelTransport,
			function (channel) {
				//这里的window.WebClientBridge_obj是自己定义的一个名称,可以随便取
				//这行代码相当于在前端js和客户端c++进行关联,关联完毕后就可以调用到注册的辅助类的数据和方法
				window.WebClientBridge_obj = channel.objects.WebClientBridge_obj;
			});
	</script>
</head>

<body>
	<div>
		<input type="button" value="调用c++" onclick="jsInvokeC()" style="background-color: aqua;">
	</div>
</body>

</html>